<template>
  <view class="container">
    <uv-form labelPosition="left" :model="myInfo" ref="form">
      <uv-form-item
        v-for="(item, key) in myInfo"
        :key="key"
        :label="item.name"
        :prop="key + '.value'"
        borderBottom
      >
        <view class="txt-btn">
          <uv-textarea v-model="item.value" border="none" :disabled="item.disabled"></uv-textarea>
          <uv-button
            @click="mod(item, key)"
            :text="item.modBtn ? item.modBtn : '修改'"
            type="success"
            size="mini"
            :plain="true"
            class="info-btn"
          ></uv-button>
          <uv-button
            @click="copy(item.value)"
            text="复制"
            type="primary"
            size="normal"
            class="info-btn"
          ></uv-button>
        </view>
      </uv-form-item>
    </uv-form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      myInfo: {
        info1: {
          name: "地址1",
          value: "可以保存一个地址在这里",
          disabled: true
        },
        info2: {
          name: "地址2",
          value: "可以保存一个地址在这里",
          disabled: true
        },
        info3: {
          name: "地址3",
          value: "可以保存一个地址在这里",
          disabled: true
        },
        info4: {
          name: "身份证",
          value: "可以保存一些身份证信息在这里",
          disabled: true
        },
        info5: {
          name: "其他1",
          value: "可以保存一些信息在这里",
          disabled: true
        },
        info6: {
          name: "其他2",
          value: "可以保存一些信息在这里",
          disabled: true
        },
        info7: {
          name: "其他3",
          value: "可以保存一些信息在这里",
          disabled: true
        },
        info8: {
          name: "其他4",
          value: "可以保存一些信息在这里",
          disabled: true
        },
        info9: {
          name: "其他5",
          value: "可以保存一些信息在这里",
          disabled: true
        }
      }
    }
  },
  created() {
    let data = uni.getStorageSync("myInfo")
    if (data == "") {
      data = {}
      Object.keys(this.myInfo).forEach(key => {
        data[key] = this.myInfo[key].value
      })
      uni.setStorageSync("myInfo", data)
    } else {
      Object.keys(this.myInfo).forEach(key => {
        this.myInfo[key].value = data[key]
      })
    }
  },
  methods: {
    mod(item, key) {
      item.disabled = !item.disabled
      if (item.disabled) {
        item.modBtn = "修改"
        uni.getStorage({
          key: "myInfo",
          success: function (res) {
            res.data[key] = item.value
            uni.setStorageSync("myInfo", res.data)
          }
        })
      } else {
        item.modBtn = "完成"
      }
    },
    copy(val) {
      uni.setClipboardData({
        data: val,
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "none"
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 15px;
}

.txt-btn {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info-btn {
  padding: 10px 0 5px 0;
}
</style>
